<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<style>
			div{
				margin: 5px;
			}
			#msg{
				color: red;
			}
			/* label和span默认不换行，宽度设置无效 */
			label{
				width: 80px;
				display: inline-block;	/* 可以设置宽度 */
			}
		</style>
		<script>
			function doLogin(){
				var msg = document.getElementById("msg");
				var username = document.getElementById("username").value;
				msg.innerText = "欢迎" + username + "登录";
			}
			function doClear(){
				document.getElementById('username').value = '';	//空串
				document.getElementById('password').value = '';
			}
		</script>
	</head>
	<body>
		<div id="container">
			<div id="msg"></div>
			<section>
				<fieldset>
					<legend>登录</legend>
					
					<div>
						<label for="username">用户名：</label>
						<input type="text" name="username" id="username"/>
					</div>
					
					<div>
						<label for="password">密码：</label>
						<input type="password" name="password" id="password"/>
					</div>
					
					<div>
						<button onclick="doLogin();">登录</button>
						<button onclick="doClear();">清除</button>
					</div>
				</fieldset>
			</section>
		</div>
	</body>
</html>
